<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>性格测试</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#37C2FF',
                        secondary: '#FF7D00',
                        neutral: '#F5F7FA',
                        dark: '#333333'
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
        }
    </style>
</head>
<body class="bg-neutral min-h-screen font-sans text-dark">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <h1 class="text-primary font-bold text-lg">性格测试</h1>
            <div class="text-sm text-gray-500" id="progress-text">1/5</div>
        </div>
        <!-- 进度条 -->
        <div class="w-full bg-gray-200 h-1.5">
            <div id="progress-bar" class="bg-primary h-1.5 transition-all duration-500" style="width: 20%"></div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-6">
        <!-- 开始页面 -->
        <section id="start-screen" class="py-10">
            <div class="bg-white rounded-2xl p-8 card-shadow text-center">
                <div class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fa fa-question-circle text-4xl text-primary"></i>
                </div>
                <h2 class="text-[clamp(1.5rem,5vw,2rem)] font-bold mb-4">趣味性格测试</h2>
                <p class="text-gray-600 mb-8">完成以下5道题，了解真实的自己</p>
                <button id="start-btn" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-full transition-custom w-full max-w-xs mx-auto">
                    开始测试
                </button>
            </div>
        </section>

        <!-- 测试题容器 -->
        <section id="quiz-container" class="hidden">
            <!-- 题目会通过JS动态插入 -->
        </section>

        <!-- 结果页面 -->
        <section id="result-screen" class="hidden py-6">
            <div class="bg-white rounded-2xl p-8 card-shadow">
                <h2 class="text-[clamp(1.5rem,5vw,2rem)] font-bold mb-2 text-center" id="result-title">你的性格类型</h2>
                <div class="w-32 h-32 mx-auto my-6 rounded-full flex items-center justify-center" id="result-icon-container">
                    <i class="fa fa-star text-5xl" id="result-icon"></i>
                </div>
                <div class="text-center mb-6">
                    <p class="text-gray-700 text-lg" id="result-description">这里将显示测试结果描述</p>
                </div>
                <div class="space-y-4">
                    <div class="bg-neutral rounded-xl p-4">
                        <h3 class="font-semibold mb-2">你的性格特点</h3>
                        <ul class="list-disc list-inside text-gray-600 space-y-1" id="result-traits">
                            <!-- 性格特点会通过JS动态插入 -->
                        </ul>
                    </div>
                </div>
                <button id="restart-btn" class="mt-8 bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-8 rounded-full transition-custom w-full">
                    重新测试
                </button>
            </div>
        </section>
    </main>

    <footer class="py-6 text-center text-gray-500 text-sm">
        <p>完成测试后可分享给好友</p>
    </footer>

    <script>
        // 测试题目数据
        const questions = [
            {
                id: 1,
                text: "当你有空闲时间时，你更喜欢？",
                options: [
                    { id: "q1a", text: "和朋友外出活动", value: "extrovert" },
                    { id: "q1b", text: "独自在家看书或休息", value: "introvert" },
                    { id: "q1c", text: "一半一半，看情况", value: "balanced" }
                ]
            },
            {
                id: 2,
                text: "做决策时，你更依赖？",
                options: [
                    { id: "q2a", text: "逻辑分析和事实", value: "thinking" },
                    { id: "q2b", text: "个人感受和价值观", value: "feeling" },
                    { id: "q2c", text: "根据情况灵活判断", value: "balanced" }
                ]
            },
            {
                id: 3,
                text: "对于未来的计划，你倾向于？",
                options: [
                    { id: "q3a", text: "提前规划好一切", value: "judging" },
                    { id: "q3b", text: "顺其自然，灵活应对", value: "perceiving" },
                    { id: "q3c", text: "有大致方向，但保留弹性", value: "balanced" }
                ]
            },
            {
                id: 4,
                text: "你对新事物的态度是？",
                options: [
                    { id: "q4a", text: "充满好奇，愿意尝试", value: "intuitive" },
                    { id: "q4b", text: "谨慎对待，先观察再决定", value: "sensing" },
                    { id: "q4c", text: "视情况而定", value: "balanced" }
                ]
            },
            {
                id: 5,
                text: "在团队中，你更擅长？",
                options: [
                    { id: "q5a", text: "提出创意和想法", value: "creative" },
                    { id: "q5b", text: "组织协调，确保执行", value: "organizing" },
                    { id: "q5c", text: "根据团队需要调整角色", value: "balanced" }
                ]
            }
        ];

        // 结果类型定义
        const resultTypes = {
            explorer: {
                title: "探索者",
                description: "你充满好奇心，喜欢探索新事物，对世界保持开放的态度。",
                traits: ["富有创造力", "适应性强", "好奇心旺盛", "喜欢挑战"],
                icon: "fa-compass",
                color: "#37C2FF"
            },
            planner: {
                title: "规划者",
                description: "你做事有条理，善于规划，喜欢按计划推进事情。",
                traits: ["逻辑性强", "组织能力出色", "可靠负责", "注重细节"],
                icon: "fa-calendar-check-o",
                color: "#FF7D00"
            },
            harmonizer: {
                title: "协调者",
                description: "你善于理解他人，注重和谐，是团队中的粘合剂。",
                traits: ["同理心强", "善于沟通", "合作性好", "有耐心"],
                icon: "fa-users",
                color: "#4CD964"
            },
            analyst: {
                title: "分析者",
                description: "你理性客观，善于分析问题，总能找到事物的本质。",
                traits: ["逻辑思维强", "善于思考", "严谨细致", "解决问题能力强"],
                icon: "fa-lightbulb-o",
                color: "#9013FE"
            },
            balanced: {
                title: "平衡型",
                description: "你在各方面都比较平衡，能够根据情况灵活调整自己。",
                traits: ["适应性强", "灵活多变", "全面发展", "善于调和"],
                icon: "fa-balance-scale",
                color: "#5856D6"
            }
        };

        // 全局变量
        let currentQuestionIndex = 0;
        const userAnswers = {};

        // DOM元素
        const startScreen = document.getElementById('start-screen');
        const quizContainer = document.getElementById('quiz-container');
        const resultScreen = document.getElementById('result-screen');
        const startBtn = document.getElementById('start-btn');
        const restartBtn = document.getElementById('restart-btn');
        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');

        // 初始化事件监听
        function initEventListeners() {
            startBtn.addEventListener('click', startQuiz);
            restartBtn.addEventListener('click', restartQuiz);
        }

        // 开始测试
        function startQuiz() {
            startScreen.classList.add('hidden');
            quizContainer.classList.remove('hidden');
            renderCurrentQuestion();
        }

        // 渲染当前题目
        function renderCurrentQuestion() {
            const question = questions[currentQuestionIndex];
            
            // 清空容器
            quizContainer.innerHTML = '';
            
            // 创建题目元素
            const questionElement = document.createElement('div');
            questionElement.className = 'bg-white rounded-2xl p-6 card-shadow';
            
            // 题目标题
            questionElement.innerHTML = `
                <div class="mb-6">
                    <span class="inline-block bg-primary/10 text-primary text-sm font-medium px-3 py-1 rounded-full">
                        第 ${question.id} 题
                    </span>
                    <h2 class="text-xl font-bold mt-4 mb-6">${question.text}</h2>
                </div>
                
                <div class="space-y-3" id="options-container">
                    <!-- 选项会动态生成 -->
                </div>
                
                <div class="mt-8">
                    <button id="next-btn" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-full transition-custom w-full disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        ${currentQuestionIndex === questions.length - 1 ? '查看结果' : '下一题'}
                    </button>
                </div>
            `;
            
            quizContainer.appendChild(questionElement);
            
            // 生成选项
            const optionsContainer = document.getElementById('options-container');
            question.options.forEach(option => {
                const optionElement = document.createElement('div');
                optionElement.className = 'border border-gray-200 rounded-xl p-4 cursor-pointer hover:border-primary hover:bg-primary/5 transition-custom';
                optionElement.innerHTML = `
                    <label class="flex items-center cursor-pointer">
                        <input type="radio" name="q${question.id}" value="${option.value}" class="w-5 h-5 text-primary focus:ring-primary" data-option-id="${option.id}">
                        <span class="ml-3">${option.text}</span>
                    </label>
                `;
                
                optionsContainer.appendChild(optionElement);
                
                // 选项点击事件
                const radioInput = optionElement.querySelector('input');
                radioInput.addEventListener('change', () => {
                    // 保存答案
                    userAnswers[question.id] = option.value;
                    
                    // 启用下一题按钮
                    document.getElementById('next-btn').removeAttribute('disabled');
                    
                    // 高亮选中的选项
                    document.querySelectorAll('#options-container > div').forEach(el => {
                        el.classList.remove('border-primary', 'bg-primary/5');
                    });
                    optionElement.classList.add('border-primary', 'bg-primary/5');
                });
            });
            
            // 下一题按钮事件
            document.getElementById('next-btn').addEventListener('click', () => {
                if (currentQuestionIndex < questions.length - 1) {
                    currentQuestionIndex++;
                    updateProgress();
                    renderCurrentQuestion();
                } else {
                    // 最后一题，计算结果
                    calculateResult();
                }
            });
        }

        // 更新进度
        function updateProgress() {
            const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
            progressBar.style.width = `${progress}%`;
            progressText.textContent = `${currentQuestionIndex + 1}/${questions.length}`;
        }

        // 计算结果
        function calculateResult() {
            // 简单的结果计算逻辑，可根据实际需求调整
            const counts = {
                extrovert: 0,
                introvert: 0,
                thinking: 0,
                feeling: 0,
                judging: 0,
                perceiving: 0,
                intuitive: 0,
                sensing: 0,
                creative: 0,
                organizing: 0,
                balanced: 0
            };
            
            // 统计答案
            Object.values(userAnswers).forEach(value => {
                if (counts[value] !== undefined) {
                    counts[value]++;
                }
            });
            
            // 决定结果类型
            let resultType;
            
            if (counts.balanced >= 3) {
                resultType = 'balanced';
            } else if (counts.intuitive + counts.creative >= 3) {
                resultType = 'explorer';
            } else if (counts.judging + counts.organizing >= 3) {
                resultType = 'planner';
            } else if (counts.feeling + counts.extrovert >= 3) {
                resultType = 'harmonizer';
            } else {
                resultType = 'analyst';
            }
            
            // 显示结果
            displayResult(resultType);
        }

        // 显示结果
        function displayResult(resultType) {
            const result = resultTypes[resultType];
            
            // 更新结果页面内容
            document.getElementById('result-title').textContent = result.title;
            document.getElementById('result-description').textContent = result.description;
            document.getElementById('result-icon').className = `fa ${result.icon} text-5xl`;
            document.getElementById('result-icon').style.color = result.color;
            document.getElementById('result-icon-container').style.backgroundColor = `${result.color}20`;
            
            // 清空并添加性格特点
            const traitsList = document.getElementById('result-traits');
            traitsList.innerHTML = '';
            result.traits.forEach(trait => {
                const li = document.createElement('li');
                li.textContent = trait;
                traitsList.appendChild(li);
            });
            
            // 切换到结果页面
            quizContainer.classList.add('hidden');
            resultScreen.classList.remove('hidden');
        }

        // 重新测试
        function restartQuiz() {
            currentQuestionIndex = 0;
            Object.keys(userAnswers).forEach(key => delete userAnswers[key]);
            progressBar.style.width = '20%';
            progressText.textContent = '1/5';
            
            resultScreen.classList.add('hidden');
            quizContainer.classList.remove('hidden');
            renderCurrentQuestion();
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            initEventListeners();
        });
    </script>
</body>
</html>
